<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">

    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">


    <div class="row">
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总和累计</span>
                    <h5>医废产量</h5>
                </div>
                <div class="ibox-content" name="sum">
                    <h1 class="no-margins">-</h1>
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <small>总和累计</small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">全年</span>
                    <h5>医废产量</h5>
                </div>
                <div class="ibox-content" name="year_sum">
                    <h1 class="no-margins">-</h1>
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <!--<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>-->
                    <small>全年产量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">月</span>
                    <h5>医废产量</h5>
                </div>
                <div class="ibox-content" name="month_sum">
                    <h1 class="no-margins">-</h1>
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <!--<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>-->
                    <small>本月产量</small>
                </div>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-warning pull-right">周</span>
                    <h5>医废产量</h5>
                </div>
                <div class="ibox-content" name="week_sum">
                    <h1 class="no-margins">-</h1>
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <!--<div class="stat-percent font-bold text-warning">98% <i class="fa fa-bolt"></i></div>-->
                    <small>本周产量</small>
                </div>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">日</span>
                    <h5>医废产量</h5>
                </div>
                <div class="ibox-content" name="day_sum">
                    <h1 class="no-margins">-</h1>
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <!--<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>-->
                    <small>今日产量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">积存量</span>
                    <h5>医废积存量</h5>
                </div>
                <div class="ibox-content" name="store_sum">
                    <h1 class="no-margins">-</h1>
                    <!--<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>-->
                    <div class="stat-percent font-bold text-success">Kg</div>
                    <small>总积存量</small>
                </div>
            </div>
        </div>


    </div>

    <div class="row hide">
        <!-- 年、月、日 产量出入库量统计图 -->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                        <!-- todo -->
                        <div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">2,346</h2>
                                    <small>订单总数</small>
                                    <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- todo -->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>产量记录</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover no-margins" id="selectTagUpdateDescLimit">
                        <thead>
                        <tr>
                            <th>医院</th>
                            <th>条码</th>
                            <th>更新日期</th>
                            <th>科室</th>
                            <th>类型</th>
                            <th>用户</th>
                            <th>重量</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<script th:inline="javascript"> var ctx = [[@{
    /}]]; </script>
<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    var prefix = ctx + "yf/reports";

    //todo ajax 查询顶部统计
    //总产量：年、月、周、日、预警
    $.ajaxSettings.async = true;    // 异步请求
    $.post(prefix + "/priview", null, function (res) {
        if (res.code == 200) {
            console.log(res);
            $("div[name='sum'] h1").html(res.data.sum);
            $("div[name='year_sum'] h1").html(res.data.year_sum);
            $("div[name='month_sum'] h1").html(res.data.month_sum);
            $("div[name='week_sum'] h1").html(res.data.week_sum);
            $("div[name='day_sum'] h1").html(res.data.day_sum);
            $("div[name='store_sum'] h1").html(res.data.store_sum);
        }
    })

    // 产量记录更新 10条记录   <i class="fa fa-level-up">
    $.ajaxSettings.async = true;    // 异步请求
    $.post(ctx + "yf/reports/selectTagUpdateDescLimit", null, function (res) {
        $("#selectTagUpdateDescLimit > tbody").html("")
        for (let i = 0; i < res.rows.length; i++) {
            var d = res.rows[i];
            $("#selectTagUpdateDescLimit > tbody").append(`<tr>
                            <td>
                                <small>` + d.hospitalName + `</small>
                            </td>
                            <td>
                                <small>` + d.codeId + `</small>
                            </td>

                            <td><i class="fa fa-clock-o"></i> ` + d.update + `</td>
                            <td>
                                <small>` + d.deptName + `</small>
                            </td>
                            <td>
                              ` + getTrashType(d.type) + `
                            </td>
                            <td>` + d.name + `</td>
                            <td class="text-navy"></i> ` + d.weight + ` kg</td>
                            <td>
                               ` + getTrashStatus(d.status) + `
                            </td>
                        </tr>`);
        }

    })

    //格式化用户名称
    function formatUserName() {

    }

    //获取医废类型
    function getTrashType(st) {
        if (st == 1)
            return `<small>病理性</small>`
        else if (st == 2)
            return `<small>损伤性</small>`
        else if (st == 3)
            return `<small>感染性</small>`
        else if (st == 4)
            return `<small>药物性</small>`
        else if (st == 5)
            return `<small>化学性</small>`
        else if (st == 6)
            return `<small>胎盘</small>`
    }

    //医废出入库状态
    function getTrashStatus(st) {
        if (st == 10)
            return `<span class="label label-info">已收集</span>`
        else if (st === 15)
            return `<span class="label label-danger">已转运</span>`
        else if (st == 20)
            return `<span class="label label-warning">已入库</span>`
        else if (st == 25)
            return `<span class="label label-warning">出库中</span>`
        else if (st >= 30 || ststus <= 40)
            return `<span class="label label-primary">已出库</span>`
        else if (st == 50)
            return `<span class="label label-primary">车载运输中</span>`
        else
            return `<small>进行中...</small>`
    }

    $(document).ready(function () {
        var data2 = [
            [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
            [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
            [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
            [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
            [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
            [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
            [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
            [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
        ];

        var data3 = [
            [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
            [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
            [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
            [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
            [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
            [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
            [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
            [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
        ];


        var dataset = [
            {
                label: "订单数",
                data: data3,
                color: "#1ab394",
                bars: {
                    show: true,
                    align: "center",
                    barWidth: 24 * 60 * 60 * 600,
                    lineWidth: 0
                }
            }, {
                label: "付款数",
                data: data2,
                yaxis: 2,
                color: "#464f88",
                lines: {
                    lineWidth: 1,
                    show: true,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.2
                        }]
                    }
                },
                splines: {
                    show: false,
                    tension: 0.6,
                    lineWidth: 1,
                    fill: 0.1
                },
            }
        ];


        var options = {
            xaxis: {
                mode: "time",
                tickSize: [3, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0,
                color: '#838383'
            }
        };

        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }

        var previousPoint = null,
            previousLabel = null;

        $.plot($("#flot-dashboard-chart"), dataset, options);
    });
</script>
</body>
</html>
